<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>GNU/Hurd Hosting</title>
        <link href='http://fonts.googleapis.com/css?family=Ubuntu:bold' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Vollkorn' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <style>
         .top-navigation {
             /* this is the main GNU/Hurd green banner line */
             background: linear-gradient(#11710c,#6Ac766);
             margin:-8px;
             text-align:center;
             color:white;
             padding:80px 0;
             margin-bottom:40px;
         }
         .top-navigation p {
             font-size:1.4em;
         }
         body {
             text-align:center;
         }
         .advantages {
             /* some flex stuff */
             display:flex;
             flex-flow: row wrap;
             justify-content:space-around;
         }
         .advantages div {
             padding:40px 0;
             flex-basis: 28%;
         }
         /* make only 1 .advantages div on each row at small widths */
         @media all and (max-width:800px) {
             .advantages div {
                 padding:40px 0;
                 flex-basis: 90%;
             }
         }
         h2, h3 {
             color: #11710c;
	         font-family: 'Ubuntu', Helvetica, Arial, sans-serif;
             font-size:1.4em;
         }
         /* make some awesome fonts */
         h1 {
	         font-family: 'Ubuntu', Helvetica, Arial, sans-serif;
	         font-size: 50px;
	         line-height: 65px;
         }
         p {
           	 font-family: 'Vollkorn', Georgia, Times, serif;
	         line-height: 25px;
             font-size:1.1em;
         }
        </style>
        <div class="top-navigation">
            <h1>GNU/Hurd Hosting</h1>
            <p>Have you heard about the GNU/Hurd!?</p>
            <p>It's a fully freedom respecting and next-generational research operating system.</p>
            <p>It works today, and it's fully capable to power your website!</p>
            <p>Would you care to try it?</p>
        </div>
        <div class="advantages">
            <div><!-- each <div> is 30% wide, so there will only ever be 3 to a row -->
                <img alt="crown image" src="assets/crown.png"/>
                <h3>You are root</h3>
                <p>Sysadmins can't tell you no</p>
                <p>Do what you want</p>
                <p>Unleash your inner ganster</p>
            </div>
            <div>
                <img alt="shield image" src="assets/shield.png"/>
                <h3>Secure by default</h3>
                <p>principle of least privledge</p>
                <p>Firefox cannot access your pgp keys</p>
                <p>No flatpak necessary</p>
            </div>
            <div>
                <img alt="hammer image" src="assets/hammer.png"/>
                <h3>Extensible system</h3>
                <p>alter any system service</p>
                <p>tweak your os to your liking</p>
                <p>dare crazy things</p>
            </div>
        </div>
        <div class="advantages">
            <div>
                <img alt="GNU Logo" src="assets/gnu.png"/>
                <h3>Free Software</h3>
                <p>Run it for any reason</p>
                <p>modify the source</p>
                <p>share your changes</p>
            </div>
            <div>
                <img alt="Dollar bill logo" src="assets/dollar.png"/>
                <h3>Pricing</h3>
                <p>1 GB of space</p>
                <p>200MB of RAM</p>
                <p>$10 a month*</p>
                <p>*$5 per month discount</p>
                <p>if you contribute to the hurd</p>
            </div>
            <div>
                <img alt="book logo" src="assets/book.png"/>
                <h3>Documentation</h3>
                <p>Access to GNU/Hurd documentation</p>
                <p>Access to an online forum</p>
                <p>Access to an online wiki</p>
            </div>
        </div>
    </body>
</html>
